<template>
    <el-row>
        <el-col>
            <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen(index)" @close="handleClose">
                <component class="menu-item" v-for="(value) in Menu" :key="value.title + value.url"
                    :is="(value.children && value.children.length > 0) ? 'el-submenu' : 'el-menu-item'"
                    @click=" jump(value.url)">
                    <template slot="title">
                        <i :class="[value.icon]"></i>
                        <span>{{ value.title }}</span>
                    </template>
                    <template v-if="value.children && value.children.length > 0">
                        <el-menu-item class="menu-item" v-for="(v) in value.children" @click="jump(v.url)"
                            :key="v.index">
                            <i :class="[v.icon]"></i>
                            <span slot="title">{{ v.title }}</span>
                        </el-menu-item>
                    </template>
                </component>

            </el-menu>
        </el-col>
    </el-row>

</template>

<script>
import Personal_Central from './Personal_Central.vue';

export default {
    data() {
        return {
            Menu: [
                { title: '个人中心', slot: 'title', icon: 'el-icon-user-solid', index: 2, url: '/home/Personal_Central' },
                { title: '用户', slot: 'title', icon: 'el-icon-cpu', index: 3, url: '/home/' },

                { title: '商品', slot: 'title', icon: 'el-icon-cpu', index: 3, url: '/home/Good' },
                {
                    title: '民生', slot: 'title', icon: 'el-icon-food', index: 4,
                    children: [{
                        icon: 'el-icon-tickets',
                        title: '社会信息',
                        index: 4 - 1,
                        url: '/home/SocialMessage'

                    }, {
                        icon: 'el-icon-tickets',
                        title: '商品推荐',
                        index: 4 - 2,
                        url: '/home/SocialMessage'
                    }]
                }
            ]
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }, jump(e) {
            if (this.$route.path !== e) {
                this.$router.push(e)
            }
        }
    }
}
</script>
<style scoped>
.el-row {
    overflow-y: hidden;
}
</style>















<!-- <el-menu :default-openeds="openeds" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
    text-color="#fff" active-text-color="#333" :unique-opened="true">
    <template v-for="item in menu"  >
      <template  v-if="item.is_sub" >
       <el-submenu :index="item.index" >
        <template slot="title">
         <i class="el-icon-location"></i>
         <span>{{item.title}}</span>
        </template>
        <el-menu-item-group>  
         <template v-for="item1 in item.sub_item">
           <router-link :to="item1.to">
            <el-menu-item :index="item1.index" v-if="item1.authority()"  :key="item1.index">
              <span class="badge">
               <el-badge class="dot" is-dot :hidden="item1.is_dot"></el-badge>{{item1.title}}
              </span>
            </el-menu-item>
           </router-link>
         </template>
       </el-menu-item-group>
      </el-submenu>
     </template>
     <template v-else>
      <router-link   :to="item.to" v-if="item.authority">
       <el-menu-item index="4" >
        <i class="el-icon-s-home"></i>
        <span slot="title">首页</span>
        </el-menu-item>
      </router-link>
     </template>
   </template>
 </el-menu> -->
<!-- <script>
 export default {
   name: 'app',
   data () {
     return {
       node_list:storage.get('meun').node_list, //获得授权节点,
       menu:[
         {is_sub:false,
          title:'首页',
          index:'4',
          to:"/get_Data/getStatisticsByOrder",
         },
         {is_sub:true,
          title:'用户管理',
          index:'9',
          sub_item:[
             {title:'角色列表',index:'9-1',authority:()=>{return this.node_list[1].indexOf('user_auth_list') != -1},to:"/user/auth_list",is_dot:false},
             {title:'用户列表',index:'9-2',authority:()=>{return this.node_list[2].indexOf('user_getuserlist') != -1},to:"/user/user_list",is_dot:false},
             {title:'所有节点',index:'9-3',authority:()=>{return this.node_list[1].indexOf('user_get_node_list') != -1},to:"/user/node_list",is_dot:true}]
         },
         {is_sub:true,
          title:'公告管理',
          index:'1',
          sub_item:[
             {title:'新建公告',index:'1-1',authority:()=>{return this.node_list[1].indexOf('message_addmessage') != -1},to:"/Message/addMessage/0",is_dot:true},
             {title:'公告列表',index:'1-2',authority:()=>{return this.node_list[1].indexOf('message_getlist') != -1},to:"/Message/MessageList",is_dot:false},
             {title:'公告发送记录',index:'1-3',authority:()=>{return this.node_list[1].indexOf('message_getmsgreceive') != -1},to:"/Message/getMsgReceive",is_dot:false}]}
       ],
       openeds:['9']
     }
   }
  }
 </script>
  -->